
<template>
    <div class="MainContent" >
        <div class="left-container">
            <div class="main"></div>
        </div>
    </div>
</template>
<script>
    import moment from "moment";
    import AppFrame from "../../../libs/app-frame";

    export default{
        data(){
            return{
                isCollapsed:true
            }
        },
        components:{

        },
        computed:{

        },
        mounted(){
            this.$store.state.pageContentBackGroudColor = "#495060";
            this.fixLeftContainerHeight();


        },
        created(){

        },

        methods:{
            //搞定左边高度
            fixLeftContainerHeight(){
                 let height=$("#PageContent").height()-10;
                 $(".left-container").height(height);
                this.$store.state.MsgBus.$on("PageOnReSize",function (win) {
                    console.log(win);
                    $(".left-container").height(win.MainHeight-10)
                });
                this.fixLeftContainerSlimScroll();
            },
            fixLeftContainerSlimScroll() {
                if ($(".left-container").find(".main").length == 0) return;
                let ContentHeight = $(".left-container").height();
                $(".left-container").find(".ContentMain").slimScroll({
                    height: ContentHeight,
                    alwaysVisible: false,
                    allowPageScroll: false,
                    touchScrollStep: 200,
                    color: "#999",
                    size: "5px",
                    distance: "2px"
                });
            },
        },
        destroyed(){
            this.$store.state.pageContentBackGroudColor = "#fff";
        }
    }
</script>

<style scoped>
    .MainContent{margin: -10px;overflow: hidden}
    .left-container{background: #404654;float:left; width:240px;padding: 5px}
</style>
